import { useFreemarker } from '@/hooks/tools/useFreemarker';
import { 
    Alert, 
    Box, 
    Paper, 
    Typography, 
    Button,
    Snackbar,
    Divider,
    Chip,
    Stack
} from '@mui/material';
import ToolPageTemplate from '@/components/ToolPageTemplate';
import EditorSection from './components/EditorSection';
import ResultSection from './components/ResultSection';
import UsageGuide from './components/UsageGuide';
import ArticleIcon from '@mui/icons-material/Article';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import ExampleIcon from '@mui/icons-material/Description';

/**
 * Freemarker工具主页面组件
 */
const FreemarkerPage = () => {
    // 使用自定义Hook管理状态和逻辑
    const {
        ftl, json, isLoading, error, result, copySuccess,
        setFtl, setJson,
        handleSubmit, copyToClipboard, loadExample, clearError
    } = useFreemarker();

    return (
        <ToolPageTemplate 
            title="Freemarker 模板引擎"
            description="基于模板和数据生成输出文本的通用工具，支持HTML、配置文件等多种格式"
            category="开发工具"
            categoryColor="#52C41A"
        >
            {/* 快速信息区域 */}
            <Box sx={{ mb: 4 }}>
                <Stack direction="row" spacing={2} justifyContent="center" flexWrap="wrap">
                    <Chip 
                        icon={<ArticleIcon />} 
                        label="模板引擎" 
                        variant="outlined" 
                        color="primary"
                    />
                    <Chip 
                        label="实时预览" 
                        variant="outlined" 
                        color="secondary"
                    />
                </Stack>
            </Box>

            <Stack spacing={4}>
                {/* 编辑器区域 */}
                <Paper 
                    elevation={0} 
                    sx={{ 
                        p: 3, 
                        borderRadius: 3,
                        border: '1px solid',
                        borderColor: 'divider',
                        width: '100%'
                    }}
                >
                    <Box sx={{ 
                        display: 'flex', 
                        justifyContent: 'space-between', 
                        alignItems: 'center',
                        mb: 3 
                    }}>
                        <Typography 
                            variant="h6" 
                            sx={{ 
                                fontWeight: 700,
                                display: 'flex',
                                alignItems: 'center',
                                gap: 1
                            }}
                        >
                            <ArticleIcon color="primary" />
                            模板编辑器
                        </Typography>
                        <Button
                            variant="text"
                            size="small"
                            startIcon={<ExampleIcon />}
                            onClick={loadExample}
                            sx={{ 
                                textTransform: 'none',
                                fontWeight: 600,
                                color: 'primary.main',
                                '&:hover': {
                                    bgcolor: 'primary.main',
                                    color: 'primary.contrastText'
                                }
                            }}
                        >
                            加载示例
                        </Button>
                    </Box>

                    <EditorSection
                        ftl={ftl}
                        json={json}
                        setFtl={setFtl}
                        setJson={setJson}
                    />

                    {/* 执行按钮 */}
                    <Box sx={{ textAlign: 'center', mt: 3 }}>
                        <Button
                            variant="contained"
                            size="large"
                            startIcon={<PlayArrowIcon />}
                            onClick={handleSubmit}
                            disabled={isLoading || !ftl.trim()}
                            sx={{
                                borderRadius: '25px',
                                px: 4,
                                py: 1.5,
                                textTransform: 'none',
                                fontWeight: 600,
                                fontSize: '1.1rem',
                                minWidth: 200
                            }}
                        >
                            {isLoading ? '执行中...' : '执行模板'}
                        </Button>
                    </Box>
                </Paper>

                {/* 结果区域 */}
                {result && (
                    <Paper 
                        elevation={0} 
                        sx={{ 
                            p: 3, 
                            borderRadius: 3,
                            border: '1px solid',
                            borderColor: 'divider',
                            width: '100%'
                        }}
                    >
                        <ResultSection result={result} copyToClipboard={copyToClipboard} />
                    </Paper>
                )}

                {/* 使用说明 */}
                <Box sx={{ mt: 2 }}>
                    <Divider sx={{ mb: 4 }} />
                    <UsageGuide />
                </Box>
            </Stack>

            {/* 错误提示 */}
            <Snackbar
                open={!!error}
                autoHideDuration={6000}
                onClose={clearError}
                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
            >
                <Alert severity="error" onClose={clearError} sx={{ width: '100%' }}>
                    {error}
                </Alert>
            </Snackbar>

            {/* 成功提示 */}
            <Snackbar
                open={copySuccess}
                autoHideDuration={3000}
                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
            >
                <Alert severity="success" sx={{ width: '100%' }}>
                    结果已复制到剪贴板
                </Alert>
            </Snackbar>
        </ToolPageTemplate>
    );
};

export default FreemarkerPage;
